<?php echo elgg_view('golfscore/title');?>
<div class="hole_content" id="__hole_content">
	<div class="hole_img">

<?php
	$golf_course_id = get_input('golf_course_id');
	$hole = get_input('hole');
	if($hole == null) {
		$hole = 1;
	}
	$tee = get_input('tee');
	$scoreid = get_input('golf_score_id');
	
	$golf_course = elgg_get_golf_course(array('golf_course_id' => $golf_course_id));
	$golf_course = $golf_course[0];
	
	$score = elgg_get_golf_score(array('golf_course_id' => $golf_course_id));
	$score = $score[0];
	$golf_course_cards = elgg_get_golf_course_card(array('golf_course_id'=>$golf_course_id, 'hole'=> $hole));
	if($golf_course_cards) {
		$golf_course_card = $golf_course_cards[0];
	}
	
	$golf_course_card_id = $golf_course_card->golf_course_card_id;
	$map = $golf_course_card->map;
	$attrs = getTeeAttributes($tee? $tee :'gold', $golf_course_card);
	
	$tee_x = $attrs['tee_x'] ? $attrs['tee_x'] : 350;
	$tee_y = $attrs['tee_y'] ? $attrs['tee_y'] : 50;
	
	$hole_x = $golf_course_card->hole_x ? $golf_course_card->hole_x : 51;
	$hole_y = $golf_course_card->hole_y ? $golf_course_card->hole_y : 138;
	$distance = $attrs['distance'] ? $attrs['distance'] : 396;
	$fname = explode('.', $map);
?>

		<div id="map">
			<canvas id="myCanvas" width="380" height="570" style="position: absolute;top:0;left:0; z-index: 10"></canvas>
			<img src="<?php echo elgg_get_site_url();?>_graphics/hole/<?php echo $map?>" />
			<div id="tee_container" class="draggable object objtee"><span id='item'></span></div>
			<div id="ball_container" class="draggable object objball"><span id='item'></span></div>
			<div id="hole_container" class="draggable object objhole"><span id='item'></span></div>
			<div id="target_container" class="draggable object objtarget"><span id='item'></span><label id="distance"></label></div>
		</div>
	</div>
<?php if($hole!=1){?>
	<div id="lastHole" onclick="onLastHole(<?php echo $score->golf_score_id ?>,<?php echo $hole?>)"></div>
<?php }?>
<?php if($hole!=18){?>
	<div id="nextHole" onclick="onNextHole(<?php echo $score->golf_score_id ?>,<?php echo $hole?>)"></div>
<?php }?>
	<div id="zoomed-image" style="display:none;position: absolute;width:140px;height:140px;background-color:white;background-image:url('<?php echo elgg_get_site_url();?>_graphics/hole/<?php echo $fname[0]."_large"?><?php echo ".".$fname[1] ?>');background-repeat: no-repeat">
		<span id="zoomed_distance"></span>
		<label id="target">o</label>
	</div>
	<div class='hole_info' style="z-index: 11;">
	<?php echo elgg_view('input/hidden', array('id' => '__golf_course_card_id', 'value' => $golf_course_card_id)); ?>
	  	<h2>
	  		<label style='background: <?php echo $tee ?>; margin-bottom: 10px;width:20px;height:20px;float:left;'></label>
	  		<?php echo elgg_view('input/dropdown', array(
				'class' => 'elgg-golfscore-select-admin-hole', 
				'name' => 'hole', 
	  			'id' => '__hole',
				'value' => $hole,
	  			'onchange' => "onSelectHole()",
				'options_values' => array(
					'1' => '1',
					'2' => '2',
					'3' => '3',
					'4' => '4',
					'5' => '5',
					'6' => '6',
					'7' => '7',
					'8' => '8',
					'9' => '9',
					'10' => '10',
					'11' => '11',
					'12' => '12',
					'13' => '13',
					'14' => '14',
					'15' => '15',
					'16' => '16',
					'17' => '17',
					'18' => '18',
				)
			)); ?>
	  		<span></span>
	  		<?php
	  			if($golf_course_card == null || $golf_course_card -> map == null) {
		  			$form_params = array('enctype' => 'multipart/form-data', 'id' => '__upload_form');
					echo elgg_view_form('golfscore/upload', $form_params, array('golf_course_id' => $golf_course_id,'hole' => $hole));
	  			}
			?>
	  	</h2>
	  	<?php
	  		if($golf_course_card != null && $golf_course_card -> map != null) {
	  	?>
	  	<p class='hole_par'>
		<?php 
	  	  	echo "Par ";
	  	  	echo elgg_view('input/text', array(
				'class' => 'elgg-golfscore-text-admin-hole-par',
				'placeholder' => 'Par', 
	  	  		'name' => 'par',
	  	  		'id' => '__par',
				'value' => $golf_course_card -> par . '',
			)); 
	  	?>
	  	</p>
	  	<p class='hole_par'>
		<?php 
	  	  	echo "Hole ";
	  	  	echo elgg_view('input/text', array(
				'class' => 'elgg-golfscore-text-admin-hole-par',
				'placeholder' => 'Hole x', 
	  	  		'name' => 'hole_x',
	  	  		'id' => '__hole_x',
				'value' => $golf_course_card -> hole_x . '',
			)); 
	  	  	echo elgg_view('input/text', array(
	  	  			'class' => 'elgg-golfscore-text-admin-hole-par',
	  	  			'placeholder' => 'Hole y',
	  	  			'name' => 'hole_y',
	  	  			'id' => '__hole_y',
	  	  			'value' => $golf_course_card -> hole_y . '',
	  	  	));
	  	?>
	  	</p>
	  	<?php if(!$tee){ ?>
	  	<ul class='list_distance'>
			<li class="current" onclick="changeTeePosition('<?php echo $golf_course -> gold_tee_name ?>')">
				<span class="<?php echo $golf_course -> gold_tee_name ?>"></span>
				<?php 
			  	  	echo elgg_view('input/text', array(
						'class' => 'elgg-golfscore-text-admin-hole-tee-distance',
						'placeholder' => 'Distance', 
			  	  		'name' => 'gold_tee_distance',
			  	  		'id' => '__tee_distance',
						'value' => $golf_course_card -> gold_tee_distance . '',
					)); 
			  	  	echo elgg_view('input/text', array(
			  	  			'class' => 'elgg-golfscore-text-admin-hole-tee-x',
			  	  			'placeholder' => 'X',
			  	  			'name' => 'gold_tee_x',
			  	  			'id' => '__tee_x',
			  	  			'value' => $golf_course_card -> gold_tee_x . '',
			  	  	));
			  	  	echo elgg_view('input/text', array(
			  	  			'class' => 'elgg-golfscore-text-admin-hole-tee-y',
			  	  			'placeholder' => 'Y',
			  	  			'name' => 'gold_tee_y',
			  	  			'id' => '__tee_y',
			  	  			'value' => $golf_course_card -> gold_tee_y . '',
			  	  	));
			  	?>
			</li>   
			<li onclick="changeTeePosition('<?php echo $golf_course -> blue_tee_name ?>')">
		  		<span class="<?php echo $golf_course -> blue_tee_name ?>"></span>
		  		<?php 
			  	  	echo elgg_view('input/text', array(
						'class' => 'elgg-golfscore-text-admin-hole-tee-distance',
						'placeholder' => 'Distance', 
			  	  		'name' => 'blue_tee_distance',
			  	  		'id' => '__tee_distance',
						'value' => $golf_course_card -> blue_tee_distance . '',
					)); 
			  	  	echo elgg_view('input/text', array(
			  	  			'class' => 'elgg-golfscore-text-admin-hole-tee-x',
			  	  			'placeholder' => 'X',
			  	  			'name' => 'blue_tee_x',
			  	  			'id' => '__tee_x',
			  	  			'value' => $golf_course_card -> blue_tee_x . '',
			  	  	));
			  	  	echo elgg_view('input/text', array(
			  	  			'class' => 'elgg-golfscore-text-admin-hole-tee-y',
			  	  			'placeholder' => 'Y',
			  	  			'name' => 'blue_tee_y',
			  	  			'id' => '__tee_y',
			  	  			'value' => $golf_course_card -> blue_tee_y . '',
			  	  	));
			  	?>
		  	</li>
		  	<li onclick="changeTeePosition('<?php echo $golf_course -> white_tee_name ?>')">
		  		<span class="<?php echo $golf_course -> white_tee_name ?>"></span>
		  		<?php 
			  	  	echo elgg_view('input/text', array(
						'class' => 'elgg-golfscore-text-admin-hole-tee-distance',
						'placeholder' => 'Distance', 
			  	  		'name' => 'white_tee_distance',
			  	  		'id' => '__tee_distance',
						'value' => $golf_course_card -> white_tee_distance . '',
					)); 
			  	  	echo elgg_view('input/text', array(
			  	  			'class' => 'elgg-golfscore-text-admin-hole-tee-x',
			  	  			'placeholder' => 'X',
			  	  			'name' => 'white_tee_x',
			  	  			'id' => '__tee_x',
			  	  			'value' => $golf_course_card -> white_tee_x . '',
			  	  	));
			  	  	echo elgg_view('input/text', array(
			  	  			'class' => 'elgg-golfscore-text-admin-hole-tee-y',
			  	  			'placeholder' => 'Y',
			  	  			'name' => 'white_tee_y',
			  	  			'id' => '__tee_y',
			  	  			'value' => $golf_course_card -> white_tee_y . '',
			  	  	));
			  	?>
		  	</li>
		  	<li onclick="changeTeePosition('<?php echo $golf_course -> red_tee_name ?>')">
		  		<span class="<?php echo $golf_course -> red_tee_name ?>"></span>
		  		<?php 
			  	  	echo elgg_view('input/text', array(
						'class' => 'elgg-golfscore-text-admin-hole-tee-distance',
						'placeholder' => 'Distance', 
			  	  		'name' => 'red_tee_distance',
			  	  		'id' => '__tee_distance',
						'value' => $golf_course_card -> red_tee_distance . '',
					)); 
			  	  	echo elgg_view('input/text', array(
			  	  			'class' => 'elgg-golfscore-text-admin-hole-tee-x',
			  	  			'placeholder' => 'X',
			  	  			'name' => 'red_tee_x',
			  	  			'id' => '__tee_x',
			  	  			'value' => $golf_course_card -> red_tee_x . '',
			  	  	));
			  	  	echo elgg_view('input/text', array(
			  	  			'class' => 'elgg-golfscore-text-admin-hole-tee-y',
			  	  			'placeholder' => 'Y',
			  	  			'name' => 'red_tee_y',
			  	  			'id' => '__tee_y',
			  	  			'value' => $golf_course_card -> red_tee_y . '',
			  	  	));
			  	?>
		  	</li>
		</ul>
		<?php echo elgg_view('input/button', array('value' => elgg_echo('save'), 'onclick' => '__onSaveGolfCourseCard();')); ?>
	    <?php }?>
	    <?php }?>
	</div>
</div>

 <script type="text/javascript">
 $(document).ready(function(){
	flag = true;
	 $('.btnaddscore').click(function(){
			if(flag==true){
				$('._enter_edit_score').slideDown();
				flag = false;
				$("html, body").animate({ scrollTop: $(document).height() }, "slow");
			}else{
				$('._enter_edit_score').slideUp();
				flag = true;
			}
			return flag;
	});
});	

 </script>
 
 <script>

 
 
var tee_x = <?php echo $tee_x?>;
var tee_y = <?php echo $tee_y?>;

var hole_x = <?php echo $hole_x?>;
var hole_y = <?php echo $hole_y?>;

var distance = <?php echo $distance?>;
//Setup Map
var map = new Map();
map.setTeePosition(tee_x,tee_y);
map.setHolePosition(hole_x,hole_y);
map.setHoleDistance(distance);
map.ball.setPosition(tee_x,tee_y);
map.ball.departure.setPosition(tee_x,tee_y);
map.target.setPosition(hole_x,hole_y);

//Draw
var teeContainer = $('#tee_container');
var holeContainer = $('#hole_container');
var ballContainer = $('#ball_container');
var targetContainer = $('#target_container');

var tee = $('#tee_container #item');
var hole = $('#hole_container #item');
var target = $('#target_container #item');
var ball = $('#ball_container #item');
var mapOffsetTop = $("#map").offset().top;
var mapOffsetLeft = $("#map").offset().left;
teeContainer.offset({ top: map.tee.x - mapOffsetTop, left: map.tee.y-mapOffsetLeft });
holeContainer.offset({ top: map.hole.x - mapOffsetTop , left: map.hole.y - mapOffsetLeft });
ballContainer.offset({ top: map.ball.x - mapOffsetTop, left: map.ball.y - mapOffsetLeft });
targetContainer.offset({ top: map.target.x - mapOffsetTop, left: map.target.y - mapOffsetLeft });

$('#distance').text(Math.floor(map.getTargetToBallDistance()));

drawLine(map.target.y - mapOffsetLeft+16-2,map.target.x - mapOffsetTop+32,map.ball.y - mapOffsetLeft+16-2,map.ball.x - mapOffsetTop+32);

tee.text(teeContainer.offset().top + '|' + teeContainer.offset().left);

targetContainer.draggable({
	drag: function(){
		setBallTargetDistance();
		changePosition($(this));
		drawLine(targetContainer.offset().left+16-4,targetContainer.offset().top+32-5,ballContainer.offset().left+16-4,ballContainer.offset().top+32-5);
		onDrugTarget(Math.floor($(this).offset().top),Math.floor($(this).offset().left));
	},
	stop: function(){
		drawLine(targetContainer.offset().left+16-4,targetContainer.offset().top+32-5,ballContainer.offset().left+16-4,ballContainer.offset().top+32-5);
		$('#zoomed-image').hide();
	}
});

ballContainer.draggable({
	drag: function(){
		setBallShotDistance();
		setBallTargetDistance();
		changePosition($(this));
		drawLine(targetContainer.offset().left+16-4,targetContainer.offset().top+32-5,ballContainer.offset().left+16-4,ballContainer.offset().top+32-5);
		onDrugBall(Math.floor(map.getTargetToBallDistance()),Math.floor($(this).offset().top),Math.floor($(this).offset().left));
	},
	stop: function(){
		drawLine(targetContainer.offset().left+16-4,targetContainer.offset().top+32-5,ballContainer.offset().left+16-4,ballContainer.offset().top+32-5);
		resetBallShot();
		$('#zoomed-image').hide();
	}
});

function changeTeePosition(tee){
	$('.list_distance').find('.current').removeClass('current');
	$('.list_distance').find('.' + tee).parent().addClass('current');
	var teeAttr = getCurrentTeeAttr(tee);
	console.log(teeAttr);
	map.ball.setPosition(teeAttr[0],teeAttr[1]);
	map.setTeePosition(teeAttr[0],teeAttr[1]);
	
	//map.setHoleDistance(teeAttr[2]);
	teeContainer.offset({ top: map.tee.x + $("#map").offset().top, left: map.tee.y + $("#map").offset().left });
	ballContainer.offset({ top: map.ball.x + $("#map").offset().top, left: map.ball.y + $("#map").offset().left });
	$('#distance').text(Math.floor(map.getTargetToBallDistance()));
}

function getCurrentTeeAttr() {
	var attrs = new Array();
	var __container = $('.list_distance').find('.current');
	attrs[0] = $(__container).find('#__tee_x').val();
	attrs[1] = $(__container).find('#__tee_y').val();
	attrs[2] = $(__container).find('#__tee_distance').val();

	for (i in attrs){
		attrs[i] = attrs[i]? parseFloat(attrs[i]) : 0;
	}

	console.log(attrs);
	return attrs;
}

function changePosition(object){
	var p = object.offset();
    var xPos = p.left;
    var yPos = p.top;
	changeZoomedPosition(xPos,yPos);
	changeZoomedImage(object.position().left,object.position().top);
	$('#zoomed-image').show();
}

function setBallTargetDistance(){
	map.target.setPosition(target.offset().top, target.offset().left);
	map.ball.setPosition(ball.offset().top, ball.offset().left);
	//target.text(map.getTargetToBallDistance());
	$('#distance').text(Math.floor(map.getTargetToBallDistance()));
	$('#zoomed_distance').text(Math.floor(map.getTargetToBallDistance()));
	
}

function setBallShotDistance(){
	map.ball.setPosition(ball.offset().top, ball.offset().left);
	//ball.text(map.getBallShotDistance());
}

function resetBallShot(){
	map.ball.departure.setPosition(map.ball.x,map.ball.y);
}

function drawLine(xStart,yStart,xEnd,yEnd){
	  var html5Canvas = $('#myCanvas');
      var canvasDiv = $('#map');

      if (html5Canvas.length > 0) {
          html5Canvas[0].width = canvasDiv.width();
          html5Canvas[0].height = canvasDiv.height();
      }
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(xStart, yStart);
      context.lineTo(xEnd, yEnd);
      context.lineWidth = 2;

      // set line color
      context.strokeStyle = '#ff0000';
      context.stroke();
      
}

function shot(){
	var departure = map.getDeparturePosition(); //Offset
	 
	$.ajax({type: "POST",
		url: '<?php echo elgg_get_site_url() . "ajax/view/igolf_map/shot" ?>',
		dataType: "html",
		cache: false,
		data: {
			golf_course_card_id : "<?php echo $golf_course_card_id?>",
			shot_position_x : departure.top,
			shot_position_y : departure.left,
			distance_to_hole: 396,
		},
		success: function(data) {
			
		}
	});
}

function onDrugTarget(x,y) {
	$('#__hole_content').find('#__hole_x').val(x);
	$('#__hole_content').find('#__hole_y').val(y);
}

function onDrugBall(dis,x,y) {
	var __container = $('.list_distance').find('.current');
	//$(__container).find('#__tee_distance').val(dis);
	$(__container).find('#__tee_x').val(x);
	$(__container).find('#__tee_y').val(y);
}

function onSelectHole() {
	onMapHoleDetail(<?php echo $golf_course_id ?>,$('#__hole_content').find('#__hole').val());
}

function onUpload(){
	var golf_course_id = <?php echo $golf_course_id ?>;
	var hole = <?php echo $hole ?>;
	$('.loading').show();
	$('#__upload_form').ajaxSubmit({
		dataType: "json",
		success : function(data) {
			$('.loading').hide();
			console.log(data);
			if(data.error == 0) {
				onMapHoleDetail(golf_course_id,hole);
			}
		},
		error : function(xhr, ajaxOptions, thrownError) {
			$('.loading').hide();
			//alert(xhr.status);
			//alert(thrownError);
		},
		url : '<?php echo elgg_get_site_url() . "ajax/view/golfscore/upload" ?>'
	});
}

function __onSaveGolfCourseCard(){
	var golf_course_card_id = $('#__hole_content').find('#__golf_course_card_id').val();
	var golf_course_id = <?php echo $golf_course_id ?>;
	var hole = <?php echo $hole ?>;
	var gold_tee_distance = $('#__hole_content').find('#__tee_distance[name="gold_tee_distance"]').val();
	var blue_tee_distance = $('#__hole_content').find('#__tee_distance[name="blue_tee_distance"]').val();
	var white_tee_distance = $('#__hole_content').find('#__tee_distance[name="white_tee_distance"]').val();
	var red_tee_distance = $('#__hole_content').find('#__tee_distance[name="red_tee_distance"]').val();
	var par = $('#__hole_content').find('#__par').val();
	var hole_x = $('#__hole_content').find('#__hole_x').val();
	var hole_y = $('#__hole_content').find('#__hole_y').val();
	var gold_tee_x = $('#__hole_content').find('#__tee_x[name="gold_tee_x"]').val();
	var gold_tee_y = $('#__hole_content').find('#__tee_y[name="gold_tee_y"]').val();
	var blue_tee_x = $('#__hole_content').find('#__tee_x[name="blue_tee_x"]').val();
	var blue_tee_y = $('#__hole_content').find('#__tee_y[name="blue_tee_y"]').val();
	var white_tee_x = $('#__hole_content').find('#__tee_x[name="white_tee_x"]').val();
	var white_tee_y = $('#__hole_content').find('#__tee_y[name="white_tee_y"]').val();
	var red_tee_x = $('#__hole_content').find('#__tee_x[name="red_tee_x"]').val();
	var red_tee_y = $('#__hole_content').find('#__tee_y[name="red_tee_y"]').val();
	onSaveGolfCourseCard(golf_course_card_id,golf_course_id,hole,gold_tee_distance,blue_tee_distance,white_tee_distance,
			red_tee_distance,par,hole_x,hole_y,gold_tee_x,gold_tee_y,blue_tee_x,blue_tee_y,
			white_tee_x,white_tee_y,red_tee_x,red_tee_y);
}

</script>
 
 <script>
 	//Stick zooming container to the dragging icon
 	var zoomingContainerWidth = 140;
 	var draggableIconWidth = 32;
 	var zoomingContainerBorderWidth = 4;
 	var zoomedPercentage = 3; //*100

 	var zoomingContainerTop = 70;
 	var zoomingContainerLeft = 10;
 	
	function changeZoomedPosition(x,y){
		var xp = (x - zoomingContainerWidth/2 + draggableIconWidth/2 - zoomingContainerBorderWidth);
		var yp = (y - zoomingContainerWidth/2 + draggableIconWidth - zoomingContainerBorderWidth) - zoomingContainerTop;
		if(yp <= 0){
			yn = 140 + yp;
			$('#zoomed-image').offset({'left':xp,'top':yn});
		}else{
			$('#zoomed-image').offset({'left':xp,'top':yp});
		}

	}

 	//Zoom to the position of the dragging icon
	function changeZoomedImage(x,y){
		//draggableicon's position.left * zoomedpercentage - zoomingcontainer.width/2 + draggableicon.width/2 - zoomingcontainer.border
		var xz = x * zoomedPercentage - draggableIconWidth/2 - zoomingContainerBorderWidth ;
		var yz = y * zoomedPercentage + draggableIconWidth - zoomingContainerBorderWidth;
		var pos = ' ' + -xz + 'px ' + -yz +'px';
		$('#zoomed-image').css({'background-position' : pos});
	}
</script>
 
  <style>
.draggable {
 width: 32px; height: 32px;
 display:block;
}

.objtarget{
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_marker.png) no-repeat top left;
z-index: 22;
}
.objtarget label { position: relative; background: #fff; border: 2px solid #c2e1f5;
border-radius: 3px;
-webkit-border-radius: 3px;
color: #333;
padding: 5px;
display:block;
margin-top: -35px;
margin-left: -2px;
width: 20px; text-align:center;
font-size: 12px;
} 
.objtarget label:after, .objtarget label:before {
 top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
 } 
.objtarget label:after { border-color: rgba(136, 183, 213, 0); border-top-color: #fff; border-width: 4px; left: 50%; margin-left: -4px; }
.objtarget label:before { border-color: rgba(194, 225, 245, 0); border-top-color: #fff; border-width: 7px; left: 50%; margin-left: -7px; }

.objtarget:hover{
	background: url(<?php echo elgg_get_site_url();?>_graphics/icon_marker_hover.png) no-repeat top left;
}

.objtee{
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_ball.png) no-repeat top left;
z-index: 5;
 text-indent: -9999px;
}

.objhole{
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_hole.png) no-repeat top left;
z-index: 10;
 text-indent: -9999px;
}

.objball {
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_marker1.png) no-repeat top left;
z-index:15;
}

.objball:hover{
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_marker1_hover.png) no-repeat top left;
}

.objmove{
 text-indent: -9999px;
display:block;
width: 32px; height: 32px;
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_move.png) no-repeat top left;
}

#map {
	position: relative!important;
	overflow:hidden;
	min-width: 380px; min-height: 570px;
}

#map img{
display:block;
}
#map div{
position: absolute;
}

.hole_distance{
 margin-bottom: 10px;
 color: #555;
 margin-top: 5px;
}
.hole_distance span{
font-weight:bold;
color :red;
}
#zoomed-image{
border: 4px solid #fff;
border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 0px 2px 3px rgba(0,0,0,0.4);
-webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.4);
z-index: 30;
}

#zoomed-image #target{
	background: url(<?php echo elgg_get_site_url();?>_graphics/icon_marker.png) no-repeat top left;
	width: 32px; height: 32px;
	 display:block;
	 text-indent: -9999px;
	 position: absolute;
	 top: 38px;
	 left:54px;
}

#zoomed-image #zoomed_distance{
 	 width: 32px;
	 display:block;
	 position: absolute;
	 text-align:center;
	 top: 18px;
	 left:54px;
}


.btnaddscore{
display: block;
width: 40px; height: 40px;
background: #47D9BF;
border-radius: 8px;
-webkit-border-radius: 8px;
z-index: 40;
position: fixed;
right: 2%;
bottom: 50px;
opacity: .4;
}
.btnaddscore:hover{
opacity: 1;
}
.btnaddscore span{
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_addscore.png) no-repeat center center;
display:block;
width: 40px; height: 40px; 
}
._enter_edit_score{
display:none;
z-index: 20;
}
</style>